
import * as React from 'react';
import { Text, View } from 'react-native';
import { RNCamera } from 'react-native-camera';
import {
    StyleSheet,
} from 'react-native';

export function CameraExample() {
    return (
        <View>
            <View style={[styles.button, styles.margin20]}
                onTouchEnd={() => {
                    const options = {
                        quality: 0.5,
                        base64: true,
                        width: 300,
                        height: 300,
                    };
                    this.camera.takePictureAsync(options).then((photoResult) => {
                        console.log("takepicture result:" + photoResult?.path)
                    });

                }
                }>
                <Text style={styles.buttonText}>测试takepicture</Text>
            </View>


            <RNCamera
                ref={ref => {
                    this.camera = ref;
                }}
                style={styles.cameraPreview}
            >
            </RNCamera>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 10,
        backgroundColor: '#000',
    },
    button: {
        width: 160,
        height: 36,
        backgroundColor: 'hsl(190, 50%, 70%)',
        paddingHorizontal: 16,
        paddingVertical: 8,
        borderRadius: 8,
    },
    margin20: {
        marginLeft: 20
    },
    buttonText: {
        width: '100%',
        height: '100%',
        fontWeight: 'bold',
    },
    cameraPreview: { width: '100%', aspectRatio: 56 / 100 }
});

export default {
    displayName: 'pull-to-refresh',
    framework: 'React',
    category: 'UI',
    title: 'pull-to-refresh',
    documentationURL: 'pull-to-refresh',
    description: '',
    examples: [
        {
            title: 'react-native-camera',
            render: function (): any {
                return <CameraExample />;
            },
        },
    ],
};